<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rang茶商城 | 茶叶</title>
    <link rel="icon" href="../img/logo1.png">
    <link rel="stylesheet" href="../css/Tea.css">
    <script src="../js/tools/tea.js"></script>
    <script src="../js/tools/jquery.min.js"></script>
    <script src="../js/tools/mock-min.js"></script>
    <script src="../js/compent/Tea.js"></script>
    <script src="../js/api/Teaapi.js"></script>
</head>

<body>
    <header class="header">
        <div class="navbar clearfloat">
            <div class="navimg left">
                <img src="../img/logo.webp" alt="">
            </div>
            <div class="nav left">
                <ul class="navul">
                    <li>
                        <a href="./index.html">
                            <span>
                                首页
                            </span>
                        </a>
                        <div class="underline"></div>
                    </li>
                    <li>
                        <a href="./about.html">
                            <span>
                                关于
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                    <li>
                        <a href="">
                            <span id="thisPage">
                                茶叶
                            </span>
                        </a>
                        <div class="underline" id="show"></div>

                    </li>
                    <li>
                        <a href="./base.html">
                            <span>
                                基地
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                    <li>
                        <a href="./new.html">
                            <span>
                                新闻
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                    <li>
                        <a href="./assiocate.html">
                            <span>
                                联系
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                </ul>
            </div>
            <div class="nav-right right">
                <div>
                    <a href=""><img src="../img/search.png" alt=""></a>
                </div>
                <div>
                    <a href=""><img src="../img/user.png" alt=""></a>
                </div>
                <div>
                    <a href=""><img src="../img/shopping cart.png" alt=""></a>
                </div>
            </div>
        </div>
    </header>
    <!-- 头部结束 -->

    <div class="second-nav">
        <div class="second-nav-row">
            <div class="second-nav-left">茶叶</div>
            <ul class="second-nav-ul" id="secondul">
                <li>
                    <span class="secondetitle" onclick="fun(0)">
                        首页
                    </span>
                    <div class="underline1"></div>
                </li>
                <li>
                    <span class="secondetitle" onclick="fun(1)">
                        绿茶
                    </span>
                    <div class="underline1"></div>
                </li>
                <li>
                    <span class="secondetitle" onclick="fun(2)">
                        黄茶
                    </span>
                    <div class="underline1"></div>
                </li>
                <li>
                    <span class="secondetitle" onclick="fun(3)">
                        乌龙茶
                    </span>
                    <div class="underline1"></div>
                </li>
                <li>
                    <span class="secondetitle" onclick="fun(4)">
                        红茶
                    </span>
                    <div class="underline1"></div>
                </li>
                <li>
                    <span class="secondetitle" onclick="fun(5)">
                        黑茶
                    </span>
                    <div class="underline1"></div>
                </li>
                <li>
                    <span class="secondetitle" onclick="fun(6)">
                        白茶
                    </span>
                    <div class="underline1"></div>
                </li>
                <li>
                    <span class="secondetitle" onclick="fun(7)">
                        花茶
                    </span>
                    <div class="underline1"></div>
                </li>

            </ul>
        </div>
    </div>
    <!-- 第二个导航栏结束 -->

    <div class="show" id="goodshow">
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <!-- <a href="./xiangqing.html" onclick="fun1(5)">→</a> -->
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname" onclick="fun1(6)">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
        <div class="good">
            <div class="good-img">
                <img src="../img/moligreentea.webp" alt="">
            </div>
            <div class="good-title">
                <div>
                    <a href="" class="teaname">茉莉花茶</a>
                </div>
                <div class="underline2"></div>
                <div class="underline3"></div>
            </div>
            <div class="good-price">
                <span class="teaprice">￥223.0</span>
            </div>
            <div class="good-href">
                <!-- <a href="./xiangqing.html"  onclick="fun1(10)">→</a> -->
                <span onclick="fun1('茉莉花茶')">→</span>
            </div>
        </div>
    </div>
    <!-- 商品展示页结束 -->

    <div class="page">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">下一页</a>
        <a href="">最后一页</a>
    </div>
    <!-- footer -->
    <footer class="footer">
        <div class="footer-bgc">

            <div class="fu-left">
                <div class="child-left">
                    <div class="left-title-qte">
                        <div class="bigtitle">联系</div>
                        <div class="header-subtitle">Contact</div>
                    </div>
                    <div class="left-title-qte2">

                        <div class="fu-top">
                            <div class="child-top">
                                <span>
                                    关注我们
                                </span>
                            </div>
                        </div>

                        <ul class="footer-ul">
                            <li>
                                <span>
                                    <img src="../img/wechat.png" alt="">
                                </span>
                            </li>
                            <li>
                                <span>
                                    <img src="../img/weibo.png" alt="">
                                </span>
                            </li>
                        </ul>

                    </div>

                    <div class="qty-column">
                        <div class="qty-colum-title">
                            <div>
                                <span>
                                    起飞页自助建站平台
                                </span>
                            </div>
                        </div>
                        <div class="qty-mess">
                            <span>
                                地址：苏州市建外SOHO东区2号楼
                            </span>
                        </div>
                        <div class="qty-mess">
                            <span>
                                邮编：100000
                            </span>
                        </div>
                        <div class="qty-mess">
                            <span>
                                电话：010-69557550
                            </span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="fu-right">
                <div class="child-right">
                    <div class="ma">
                        <div class="ma-img">
                            <img src="../img/wechatma.webp" alt="">
                        </div>
                        <div class="ma-text">
                            <div>
                                <span>
                                    微信
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="ma">
                        <div class="ma-img">
                            <img src="../img/weiboma.webp" alt="">
                        </div>
                        <div class="ma-text">
                            <div>
                                <span>
                                    微博
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-footer">
            <div>
                <span>

                    COPYRIGHT (©) 2019 茶叶类网站 京ICP备41414141414-1号
                </span>
            </div>
        </div>
    </footer>
    <!-- footer -->
</body>

</html>